<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.join('、') }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeFirstCar">修改第一辆车</button>
    <button @click="changeSecondCar">修改第二辆车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script setup lang="ts">
// 数据
import {reactive, watch} from "vue";

let person = reactive({
  name: '张三',
  age: 18,
  car: ['宝马', '奔驰'],
});

// 方法
const changeName = (): void => {
  person.name += '~';
};

const changeAge = (): void => {
  person.age++;
};

const changeFirstCar = (): void => {
  person.car[0] += '~';
};

const changeSecondCar = (): void => {
  person.car[1] += '~';
};

const changeCar = (): void => {
  person.car = ['奥迪', '大众'];
};

/**
 * 监视：情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数形式
 */
watch(() => person.name, (newValue, oldValue) => {
  console.log('person发生了变化', newValue, oldValue);
});

/**
 * 监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也可以写函数形式，更推荐函数形式
 */
watch(() => person.car, (newValue, oldValue) => {
  console.log('car发生了变化', newValue, oldValue);
}, {deep: true});
</script>

<style scoped lang="scss">
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }
}
</style>
